<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/blog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/blog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/blog/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/blog/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/blog/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/blog/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">





  <link rel="alternate" href="/blog/atom.xml" title="编程那点事" type="application/atom+xml">






<meta property="og:type" content="website">
<meta property="og:title" content="编程那点事">
<meta property="og:url" content="https://lhweb.gitee.io/blog/page/4/index.html">
<meta property="og:site_name" content="编程那点事">
<meta property="og:locale" content="default">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="编程那点事">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/blog/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: 'Author'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://lhweb.gitee.io/blog/page/4/">





  <title>编程那点事</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="default">

  
  
    
  

  <div class="container sidebar-position-left 
  page-home">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/blog/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">编程那点事</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/blog/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/blog/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            Archives
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://lhweb.gitee.io/blog/blog/2018/09/23/typescript-react-mobx的todo实例教程/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="lhweb">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/blog/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="编程那点事">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blog/2018/09/23/typescript-react-mobx的todo实例教程/" itemprop="url">typescript+react+mobx的todo实例教程</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-09-23T09:13:08+08:00">
                2018-09-23
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">In</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/typescript/" itemprop="url" rel="index">
                    <span itemprop="name">typescript</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h1 id="为什么用TypeScript"><a href="#为什么用TypeScript" class="headerlink" title="为什么用TypeScript"></a>为什么用TypeScript</h1><p>TypeScript为JavaScript这个弱类型语言添加了基本的类型检测以及对于ES6甚至ES7的一些高级语法的转移，在一定程度上相当于增强功能版的babel，现在的很多开源项目为了得到更好的项目管理和维护性能，使用了TypeScript或者Flow来为JavaScript添加强类型。<br>TypeScript添加了很多强类型语言的功能，比如interface，class(ES6已有，功能增强)，类型检测，泛型等。<br>TypeScript的入门可以看一个<a href="https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html" target="_blank" rel="noopener">TypeScript中文官方文档</a>。</p>
<h1 id="项目环境构建"><a href="#项目环境构建" class="headerlink" title="项目环境构建"></a>项目环境构建</h1><p>这里默认大家的nodeJS基础。</p>
<p>这里项目环境的构建使用官方提供的create-react-app脚手架工具和微软提供的TypeScript支持TypeScript-react-starter，这两个项目都可以在github上面找到。</p>
<h2 id="构建基本环境"><a href="#构建基本环境" class="headerlink" title="构建基本环境"></a>构建基本环境</h2><figure class="highlight dsconfig"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">cnpm </span><span class="string">install </span>-g <span class="built_in">create-react-app</span></span><br><span class="line"><span class="built_in">create-react-app</span> <span class="string">my-app </span><span class="built_in">--scripts-version=react-scripts-ts</span></span><br><span class="line"><span class="built_in">#</span> 如果感觉下载速度比较慢的话，请切换<span class="string">npm的</span>镜像源到淘宝的镜像源</span><br><span class="line"><span class="string">npm </span><span class="string">config </span><span class="string">set </span><span class="string">registry </span><span class="string">https:</span>//<span class="string">registry.</span><span class="string">npm.</span><span class="string">taobao.</span><span class="string">org</span></span><br><span class="line"><span class="string">#</span> 可以检查一下镜像源是否切换成功</span><br><span class="line"><span class="string">npm </span><span class="string">config </span><span class="string">get </span><span class="string">registry</span></span><br></pre></td></tr></table></figure>
<p>基本上已经获得了一个完整的React项目，这里的webpack以及各种配置默认是不能够修改的，如果希望修改的话需要将配置文件弹出。</p>
<figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># yarn</span></span><br><span class="line">yarn eject</span><br><span class="line">yarn start</span><br><span class="line"><span class="comment"># npm</span></span><br><span class="line"><span class="built_in">npm</span> run eject</span><br><span class="line"><span class="built_in">npm</span> start</span><br></pre></td></tr></table></figure>
<p><strong>注意：eject这个命令是不可逆的。</strong><br>这里用yarn或者是npm都可以，目前感觉使用yarn会方便一些。</p>
<h2 id="增加额外的配置"><a href="#增加额外的配置" class="headerlink" title="增加额外的配置"></a>增加额外的配置</h2><figure class="highlight dockerfile"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn <span class="keyword">add</span><span class="bash"> mobx mobx-react</span></span><br></pre></td></tr></table></figure>
<p>ps:@types 命令在windows powershell会直接报错，如果是windows环境下，cmd来执行命令。<br>这里要注意，一定要安装所有外部依赖模块的类型定义，否则模块在使用的时候会因为没有TypeScript的类型定义而报错。</p>
<p>使用typescript开发react，对于所有需要的外部模块，都需要有.d.ts的类型定义文件，一般比较常用的模块在npm上面都是有已经写好的类型定义文件了。但是一些比较小的外部依赖还是需要自己去写。</p>
<p>类型定义文件一般放在/node_modules/@types/*目录下面，类型名为.d.ts，关于类型定义文件具体可以看TypeScript的模块部分相关文档。</p>
<h1 id="实现TodoList"><a href="#实现TodoList" class="headerlink" title="实现TodoList"></a>实现TodoList</h1><h2 id="实现功能"><a href="#实现功能" class="headerlink" title="实现功能"></a>实现功能</h2><ul>
<li>Todo条目的列表展示</li>
<li>增加Todo条目</li>
<li>修改完成状态</li>
<li>删除Todo条目</li>
</ul>
<h3 id="完整示例"><a href="#完整示例" class="headerlink" title="完整示例"></a>完整示例</h3><p>打开App.tsx编辑</p>
<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> React from <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; observable,action,computed &#125; from <span class="string">"mobx"</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;observer&#125; from <span class="string">"mobx-react"</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'./App.css'</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Todo</span> </span>&#123;</span><br><span class="line">    id = Math.random(); <span class="comment">//这里为只读属性，不用@observable修饰。</span></span><br><span class="line">    <span class="meta">@observable</span> title:string = <span class="string">''</span>;</span><br><span class="line">    <span class="meta">@observable</span> finished:boolean = <span class="literal">false</span>;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">constructor</span>(title:string)&#123;</span><br><span class="line">      <span class="keyword">this</span>.title = title;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="meta">@action</span>.bound toggle()&#123;</span><br><span class="line">      <span class="keyword">this</span>.finished = !<span class="keyword">this</span>.finished;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* @action.bound 解决this作用域的问题 */</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Store</span> </span>&#123;</span><br><span class="line"> <span class="meta">@observable</span> todos:Array&lt;any&gt; = [];</span><br><span class="line"> <span class="meta">@action</span>.bound createTodo(title:string)&#123;</span><br><span class="line">    <span class="keyword">this</span>.todos.unshift(new Todo(title));</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="meta">@computed</span> <span class="keyword">get</span> left()&#123;</span><br><span class="line">   <span class="keyword">return</span> <span class="keyword">this</span>.todos.filter(todo=&gt;!todo.finished).length</span><br><span class="line"> &#125;</span><br><span class="line"> <span class="meta">@action</span>.bound removeTodo(todo:any)&#123;</span><br><span class="line">    <span class="keyword">this</span>.todos.remove(todo); <span class="comment">//这里可以用传todo.id来解决问题，</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*这里要做一个特别的说明，这里删除todo如何跟后端交互，后端交互有2种形式，一种是根据传ID，根据ID来删除记录。那么这种传todo过来删除的方式就不太友好。还有一种就是提交新的todos的数据到后端处理。</span></span><br><span class="line"><span class="comment">如果数据量大的话，那么肯定是传ID来删除记录会比较合适。</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> store = new Store();</span><br><span class="line"><span class="class"><span class="keyword">interface</span> <span class="title">TodoItemProps</span></span>&#123;</span><br><span class="line">   todo:Todo</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* React.Fragment也可以用数组来组织替代，但是需要有key属性。 */</span></span><br><span class="line"><span class="meta">@observer</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TodoItem</span> <span class="title">extends</span> <span class="title">React</span>.<span class="title">Component</span>&lt;<span class="type">TodoItemProps,&#123;&#125;</span>&gt;</span>&#123;</span><br><span class="line">   <span class="keyword">constructor</span>(props:TodoItemProps)&#123;</span><br><span class="line">     <span class="keyword">super</span>(props);</span><br><span class="line">   &#125;</span><br><span class="line">   handleChange = (e:any)=&gt;&#123;</span><br><span class="line">      <span class="keyword">this</span>.props.todo.toggle(); </span><br><span class="line">   &#125;</span><br><span class="line">   render()&#123;</span><br><span class="line">     <span class="keyword">const</span> todo = <span class="keyword">this</span>.props.todo;</span><br><span class="line">     <span class="keyword">return</span>(</span><br><span class="line">       &lt;React.Fragment&gt;</span><br><span class="line">       &lt;input type=<span class="string">"checkbox"</span> className=<span class="string">"toggle"</span> checked=&#123;todo.finished&#125; onChange=&#123;<span class="keyword">this</span>.handleChange&#125;/&gt;</span><br><span class="line">       &lt;span className=&#123;[<span class="string">'title'</span>,todo.finished&amp;&amp;<span class="string">'finished'</span>].join(<span class="string">' '</span>)&#125;&gt;&#123;todo.title&#125;&lt;/span&gt;</span><br><span class="line">       &lt;/React.Fragment&gt;</span><br><span class="line">     )</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">interface</span> <span class="title">TodoListProps</span></span>&#123;</span><br><span class="line">   store:Store</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">interface</span> <span class="title">TodoListState</span></span>&#123;</span><br><span class="line">  inputValue:string</span><br><span class="line">&#125;</span><br><span class="line"><span class="meta">@observer</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TodoList</span> <span class="title">extends</span> <span class="title">React</span>.<span class="title">Component</span>&lt;<span class="type">TodoListProps,TodoListState</span>&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(props:TodoListProps)&#123;</span><br><span class="line">    <span class="keyword">super</span>(props);</span><br><span class="line">    <span class="keyword">this</span>.state = &#123;</span><br><span class="line">      inputValue:<span class="string">''</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">   </span><br><span class="line">  handleSubmit = (e:any)=&gt;&#123;</span><br><span class="line">    e.preventDefault() <span class="comment">//阻止整个页面被提交</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> store = <span class="keyword">this</span>.props.store;</span><br><span class="line">    <span class="keyword">var</span> inputValue = <span class="keyword">this</span>.state.inputValue;</span><br><span class="line">    store.createTodo(inputValue);</span><br><span class="line">    <span class="keyword">this</span>.setState(&#123;</span><br><span class="line">      inputValue:<span class="string">''</span></span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  handleChange = (e:any)=&gt;&#123;</span><br><span class="line">    <span class="keyword">var</span> inputValue = e.target.value; <span class="comment">//通过target.value获取input的值</span></span><br><span class="line">    <span class="keyword">this</span>.setState(</span><br><span class="line">      &#123;</span><br><span class="line">        inputValue</span><br><span class="line">      &#125;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">   render()&#123;</span><br><span class="line">     <span class="keyword">const</span> store = <span class="keyword">this</span>.props.store;</span><br><span class="line">     <span class="keyword">const</span> todos = store.todos;</span><br><span class="line"></span><br><span class="line">     <span class="keyword">return</span>(</span><br><span class="line">       </span><br><span class="line">         &lt;div className=<span class="string">"todo-list"</span>&gt;</span><br><span class="line">         &lt;header&gt;</span><br><span class="line">           &lt;form onSubmit=&#123;<span class="keyword">this</span>.handleSubmit&#125;&gt;</span><br><span class="line">            &lt;input type=<span class="string">"text"</span> onChange=&#123;<span class="keyword">this</span>.handleChange&#125; value=&#123;<span class="keyword">this</span>.state.inputValue&#125; className=<span class="string">"input"</span> placeholder=<span class="string">"What needs to be finished?"</span>/&gt;</span><br><span class="line">           &lt;/form&gt;</span><br><span class="line">         &lt;/header&gt;</span><br><span class="line">         &lt;ul&gt;</span><br><span class="line">           &#123;todos.map(todo=&gt;&#123;</span><br><span class="line">             <span class="keyword">return</span> &lt;li key=&#123;todo.id&#125; className=<span class="string">"todo-item"</span>&gt;</span><br><span class="line">             &lt;TodoItem todo=&#123;todo&#125;/&gt;</span><br><span class="line">             &lt;span className=<span class="string">"delete"</span> onClick=&#123;e=&gt;store.removeTodo(todo)&#125;&gt;X&lt;/span&gt;</span><br><span class="line">             &lt;/li&gt;;</span><br><span class="line">           &#125;)&#125;</span><br><span class="line">         &lt;/ul&gt;</span><br><span class="line">         &lt;footer&gt;</span><br><span class="line">         &#123;store.left&#125; item(s) unfinished</span><br><span class="line">         &lt;/footer&gt;</span><br><span class="line">         &lt;/div&gt;</span><br><span class="line">      </span><br><span class="line">     )</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">App</span> <span class="title">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="keyword">public</span> render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div className=<span class="string">"App"</span>&gt;</span><br><span class="line">        &lt;TodoList store = &#123;store&#125; /&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">export <span class="keyword">default</span> App;</span><br></pre></td></tr></table></figure>
<p>如何通过传ID来处理todolist数据？我们可以给Array数组的原型链来创建删除方法。示例代码如下：<br><figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*简单版*/</span></span><br><span class="line"><span class="built_in">Array</span>.prototype.remove = <span class="function"><span class="keyword">function</span>(<span class="params">key,val</span>)</span>&#123;</span><br><span class="line"> </span><br><span class="line">   <span class="keyword">for</span>(<span class="keyword">let</span> i=<span class="number">0</span>;i&lt;arr.length;i++)</span><br><span class="line">  &#123;</span><br><span class="line">     <span class="keyword">if</span>(<span class="keyword">this</span>[i][key] == val)</span><br><span class="line">     &#123;</span><br><span class="line">       <span class="keyword">this</span>.splice(i,<span class="number">1</span>)</span><br><span class="line">     &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = [&#123;<span class="attribute">id:</span><span class="string">0,name</span>:<span class="string">'香蕉0'</span>&#125;,&#123;<span class="attribute">id:</span><span class="string">1,name</span>:<span class="string">'香蕉1'</span>&#125;,&#123;<span class="attribute">id:</span><span class="string">2,name</span>:<span class="string">'香蕉2'</span>&#125;,&#123;<span class="attribute">id:</span><span class="string">3,name</span>:<span class="string">'香蕉3'</span>&#125;]</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr.remove(<span class="string">'id'</span>,<span class="number">0</span>)) </span><br><span class="line"><span class="built_in">console</span>.log(arr.remove(<span class="string">'name'</span>,<span class="number">3</span>)) </span><br><span class="line"><span class="comment">/*动身尝试，看看会得到什么结果*/</span></span><br></pre></td></tr></table></figure></p>
<p>通过此方法来删除数据，我们就可以传ID到后端来交互数据。</p>
<p>打开App.css编辑,增加以下样式</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.input</span> &#123;</span><br><span class="line">  <span class="attribute">padding</span>:<span class="number">15px</span>;</span><br><span class="line">  <span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.todo-item</span>&#123;</span><br><span class="line">  <span class="attribute">display</span>: flex;</span><br><span class="line">  <span class="attribute">align-items</span>: center;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">40px</span>;</span><br><span class="line">  <span class="attribute">border-bottom</span>:<span class="number">1px</span> solid <span class="number">#ccc</span>;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.todo-item</span> <span class="selector-class">.toggle</span>&#123;</span><br><span class="line">  <span class="attribute">margin-right</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.todo-item</span> <span class="selector-class">.title</span>&#123;</span><br><span class="line">  <span class="attribute">font-size</span>:<span class="number">24px</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.todo-item</span> <span class="selector-class">.title</span><span class="selector-class">.finished</span>&#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: line-through;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#ccc</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.todo-item</span> <span class="selector-class">.delete</span> &#123;</span><br><span class="line">  <span class="attribute">margin-left</span>:<span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>那么我们的TodoList就完成了，但是性能上还有优化的空间。</p>
<h1 id="最后说明"><a href="#最后说明" class="headerlink" title="最后说明"></a>最后说明</h1><p>本实例可能会出现报错现象。请用下面的脚手架来搭建环境。</p>
<figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">npm <span class="keyword">install</span> -g rwt-cli</span><br><span class="line">rwt init &lt;<span class="keyword">name</span>&gt;</span><br><span class="line">cd &lt;<span class="keyword">name</span>&gt;</span><br><span class="line">npm <span class="keyword">install</span></span><br><span class="line">npm <span class="keyword">start</span></span><br></pre></td></tr></table></figure>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://lhweb.gitee.io/blog/blog/2018/09/23/mobx介绍/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="lhweb">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/blog/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="编程那点事">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blog/2018/09/23/mobx介绍/" itemprop="url">mobx介绍</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-09-23T08:05:42+08:00">
                2018-09-23
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">In</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/mobx/" itemprop="url" rel="index">
                    <span itemprop="name">mobx</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h2 id="MobX"><a href="#MobX" class="headerlink" title="MobX"></a>MobX</h2><p>简单、可扩展的状态管理</p>
<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><ul>
<li><p>安装: <code>npm install mobx --save</code>。 React 绑定库: <code>npm install mobx-react --save</code>。 要启用 ESNext 的装饰器 (可选), 参见下面。</p>
</li>
<li><p>CDN:</p>
<ul>
<li><a href="https://unpkg.com/mobx/lib/mobx.umd.js" target="_blank" rel="noopener">https://unpkg.com/mobx/lib/mobx.umd.js</a></li>
<li><a href="https://cdnjs.com/libraries/mobx" target="_blank" rel="noopener">https://cdnjs.com/libraries/mobx</a></li>
</ul>
</li>
</ul>
<h2 id="浏览器支持"><a href="#浏览器支持" class="headerlink" title="浏览器支持"></a>浏览器支持</h2><ul>
<li>MobX &gt;=5 版本运行在任何支持 ES6 proxy 的浏览器。如果运行在像 IE11、Node.js 6 以下版本或依靠与较旧的 JavaScripCore 的安卓端的 React Native 。</li>
<li>MobX 4 可以运行在任何支持 ES5 的浏览器上，而且也将进行持续地维护。MobX 4 和 5 的 API 是相同的，并且语义上也能达到相同的效果，只是 MobX 4 存在一些 局限性。</li>
</ul>
<p>小贴士: MobX 5 包的主入口点附带 ES5 代码，以便向后兼容所有构建工具。但因为 MobX 5 只能运行在现代浏览器上，所以可以考虑使用速度最快、体积最小的 ES6 构建: lib/mobx.es6.js 。例如，通过设置 webpack 的别名: resolve: { alias: { mobx: __dirname + “/node_modules/mobx/lib/mobx.es6.js” }}</p>
<h2 id="入门"><a href="#入门" class="headerlink" title="入门"></a>入门</h2><p>MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:</p>
<p>任何源自应用状态的东西都应该自动地获得。</p>
<p>其中包括UI、数据序列化、服务器通讯，等等。<br><img src="/blog/2018/09/23/mobx介绍/flow.png" alt><br>React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。</p>
<p>对于应用开发中的常见问题，React 和 MobX 都提供了最优和独特的解决方案。React 提供了优化UI渲染的机制， 这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。MobX 提供了优化应用状态与 React 组件同步的机制，这种机制就是使用响应式虚拟依赖状态图表，它只有在真正需要的时候才更新并且永远保持是最新的。</p>
<h2 id="核心概念"><a href="#核心概念" class="headerlink" title="核心概念"></a>核心概念</h2><p>MobX 的核心概念不多。</p>
<h3 id="Observable-state-可观察的状态"><a href="#Observable-state-可观察的状态" class="headerlink" title="Observable state(可观察的状态)"></a>Observable state(可观察的状态)</h3><p>MobX 为现有的数据结构(如对象，数组和类实例)添加了可观察的功能。 通过使用 @observable 装饰器(ES.Next)来给你的类属性添加注解就可以简单地完成这一切。<br><figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; observable &#125; <span class="keyword">from</span> <span class="string">"mobx"</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Todo</span> &#123;</span></span><br><span class="line">    id = Math.random();</span><br><span class="line">    @observable title = <span class="string">""</span>;</span><br><span class="line">    @observable finished = <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>使用 observable 很像把对象的属性变成excel的单元格。 但和单元格不同的是，这些值不只是原始值，还可以是引用值，比如对象和数组。</p>
<p>如果你的环境不支持装饰器语法，也不必担心。 你可以点击这里查看如何进行设置。 或者你可以直接跳过设置，因为 MobX 可以通过 decorate 工具在不支持装饰器语法的情况加使用。 尽管如此，多数 MobX 用户更喜欢装饰器语法，因为它更简洁。</p>
<p>例如，上面一段代码的ES5版本应该是这样:<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; decorate, observable &#125; <span class="keyword">from</span> <span class="string">"mobx"</span>;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Todo</span> </span>&#123;</span><br><span class="line">    id = <span class="built_in">Math</span>.random();</span><br><span class="line">    title = <span class="string">""</span>;</span><br><span class="line">    finished = <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br><span class="line">decorate(Todo, &#123;</span><br><span class="line">    title: observable,</span><br><span class="line">    finished: observable</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></p>
<h3 id="Computed-values-计算值"><a href="#Computed-values-计算值" class="headerlink" title="Computed values(计算值)"></a>Computed values(计算值)</h3><p>使用 MobX， 你可以定义在相关数据发生变化时自动更新的值。 通过@computed 装饰器或者利用 (extend)Observable 时调用 的getter / setter 函数来进行使用。(当然，这里也可以再次使用 decorate 来替代 @ 语法)。<br><figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TodoList</span> </span>&#123;</span><br><span class="line">    <span class="meta">@observable</span> todos = [];</span><br><span class="line">    <span class="meta">@computed</span> <span class="keyword">get</span> unfinishedTodoCount() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.todos.filter(todo =&gt; !todo.finished).length;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>当添加了一个新的todo或者某个todo的 finished 属性发生变化时，MobX 会确保 unfinishedTodoCount 自动更新。 像这样的计算可以类似于 MS Excel 这样电子表格程序中的公式。每当只有在需要它们的时候，它们才会自动更新。</p>
<h3 id="Reactions-反应"><a href="#Reactions-反应" class="headerlink" title="Reactions(反应)"></a>Reactions(反应)</h3><p>Reactions 和计算值很像，但它不是产生一个新的值，而是会产生一些副作用，比如打印到控制台、网络请求、递增地更新 React 组件树以修补DOM、等等。 简而言之，reactions 在 响应式编程和命令式编程之间建立沟通的桥梁。</p>
<h4 id="React-组件"><a href="#React-组件" class="headerlink" title="React 组件"></a>React 组件</h4><p>如果你用 React 的话，可以把你的(无状态函数)组件变成响应式组件，方法是在组件上添加 observer 函数/ 装饰器. observer由 mobx-react 包提供的。<br><figure class="highlight scala"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="type">React</span>, &#123;<span class="type">Component</span>&#125; from <span class="symbol">'reac</span>t';</span><br><span class="line"><span class="keyword">import</span> <span class="type">ReactDOM</span> from <span class="symbol">'react</span>-dom';</span><br><span class="line"><span class="keyword">import</span> &#123;observer&#125; from <span class="symbol">'mobx</span>-react';</span><br><span class="line"></span><br><span class="line"><span class="meta">@observer</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">TodoListView</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">    render() &#123;</span><br><span class="line">        <span class="keyword">return</span> &lt;div&gt;</span><br><span class="line">            &lt;ul&gt;</span><br><span class="line">                &#123;<span class="keyword">this</span>.props.todoList.todos.map(todo =&gt;</span><br><span class="line">                    &lt;<span class="type">TodoView</span> todo=&#123;todo&#125; key=&#123;todo.id&#125; /&gt;</span><br><span class="line">                )&#125;</span><br><span class="line">            &lt;/ul&gt;</span><br><span class="line">            <span class="type">Tasks</span> left: &#123;<span class="keyword">this</span>.props.todoList.unfinishedTodoCount&#125;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">const <span class="type">TodoView</span> = observer((&#123;todo&#125;) =&gt;</span><br><span class="line">    &lt;li&gt;</span><br><span class="line">        &lt;input</span><br><span class="line">            <span class="class"><span class="keyword">type</span></span>=<span class="string">"checkbox"</span></span><br><span class="line">            checked=&#123;todo.finished&#125;</span><br><span class="line">            onClick=&#123;() =&gt; todo.finished = !todo.finished&#125;</span><br><span class="line">        /&gt;&#123;todo.title&#125;</span><br><span class="line">    &lt;/li&gt;</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line">const store = <span class="keyword">new</span> <span class="type">TodoList</span>();</span><br><span class="line"><span class="type">ReactDOM</span>.render(&lt;<span class="type">TodoListView</span> todoList=&#123;store&#125; /&gt;, document.getElementById(<span class="symbol">'moun</span>t'));</span><br></pre></td></tr></table></figure></p>
<p>observer 会将 React (函数)组件转换为它们需要渲染的数据的衍生。 使用 MobX 时没有所谓的智能和无脑组件。 所有的组件都会以巧妙的方式进行渲染，而只需要一种简单无脑的方式来定义它们。MobX 会确保组件总是在需要的时重新渲染，但仅此而已。所以上面例子中的 onClick 处理方法会强制对应的 TodoView 进行渲染，如果未完成任务的数量(unfinishedTodoCount)已经改变，它将导致 TodoListView 进行渲染。 可是，如果移除 Tasks left 这行代码(或者将它放到另一个组件中)，当点击 checkbox 的时候 TodoListView 就不再重新渲染。你可以在 JSFiddle 中自己动手来验证这点。</p>
<h4 id="自定义-reactions"><a href="#自定义-reactions" class="headerlink" title="自定义 reactions"></a>自定义 reactions</h4><p>使用autorun、reaction 和 when 函数即可简单的创建自定义 reactions，以满足你的具体场景。</p>
<p>例如，每当 unfinishedTodoCount 的数量发生变化时，下面的 autorun 会打印日志消息:<br><figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">autorun(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"Tasks left: "</span> + todos.unfinishedTodoCount)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></p>
<h3 id="MobX-会对什么作出响应"><a href="#MobX-会对什么作出响应" class="headerlink" title="MobX 会对什么作出响应?"></a>MobX 会对什么作出响应?</h3><p>为什么每次 unfinishedTodoCount 变化时都会打印一条新消息？答案就是下面这条经验法则:</p>
<p>MobX 会对在执行跟踪函数期间读取的任何现有的可观察属性做出反应。</p>
<p>想深入了解 MobX 是如何知道需要对哪个可观察属性进行响应，请查阅 理解 MobX 对什么有反应。</p>
<h3 id="Actions-动作"><a href="#Actions-动作" class="headerlink" title="Actions(动作)"></a>Actions(动作)</h3><p>不同于 flux 系的一些框架，MobX 对于如何处理用户事件是完全开明的。</p>
<ul>
<li>可以用类似 Flux 的方式完成</li>
<li>或者使用 RxJS 来处理事件</li>
<li>或者用最直观、最简单的方式来处理事件，正如上面演示所用的 onClick<br>最后全部归纳为: 状态应该以某种方式来更新。</li>
</ul>
<p>当状态更新后，MobX 会以一种高效且无障碍的方式处理好剩下的事情。像下面如此简单的语句，已经足够用来自动更新用户界面了。</p>
<p>从技术上层面来讲，并不需要触发事件、调用分派程序或者类似的工作。归根究底 React 组件只是状态的华丽展示，而状态的衍生由 MobX 来管理。</p>
<figure class="highlight haxe"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">store.todos.push(</span><br><span class="line">    <span class="keyword">new</span> <span class="type">Todo</span>(<span class="string">"Get Coffee"</span>),</span><br><span class="line">    <span class="keyword">new</span> <span class="type">Todo</span>(<span class="string">"Write simpler code"</span>)</span><br><span class="line">);</span><br><span class="line">store.todos[<span class="number">0</span>].finished = <span class="literal">true</span>;</span><br></pre></td></tr></table></figure>
<p>尽管如此，MobX 还是提供了 actions 这个可选的内置概念。 如果你现在就想要了解如何编写 actions，请阅读 Actions 章节。很简单！ 使用 actions 是有优势的: 它们可以帮助你把代码组织的更好，还能在状态何时何地应该被修改这个问题上帮助你做出明智的决定。</p>
<h2 id="MobX-简单且可扩展"><a href="#MobX-简单且可扩展" class="headerlink" title="MobX: 简单且可扩展"></a>MobX: 简单且可扩展</h2><p>MobX 是状态管理库中侵入性最小的之一。这使得 MobX的方法不但简单，而且可扩展性也非常好:</p>
<h3 id="使用类和真正的引用"><a href="#使用类和真正的引用" class="headerlink" title="使用类和真正的引用"></a>使用类和真正的引用</h3><p>使用 MobX 不需要使数据标准化。这使得库十分适合那些异常复杂的领域模型(以 Mendix 为例: 一个应用中有大约500个领域类)。</p>
<h3 id="保证参照完整性"><a href="#保证参照完整性" class="headerlink" title="保证参照完整性"></a>保证参照完整性</h3><p>因为数据不需要标准化，所以 MobX 会自动跟踪状态和衍生之间的关系，你可以免费获得参照完整性。渲染通过三级间接寻址访问的数据？</p>
<p>没有问题，MobX 会跟踪它们，一旦其中一个引用发生了变化，就会重新渲染。作为回报，陈年的老bug已不复存在。作为一个程序员，你可能记不住修改的一些数据可能会影响到的某个角落里看起来毫不相关的组件，但 MobX 不会。</p>
<h3 id="更简单的-actions-更便于维护"><a href="#更简单的-actions-更便于维护" class="headerlink" title="更简单的 actions 更便于维护"></a>更简单的 actions 更便于维护</h3><p>正如上面所演示的，使用 MobX 修改状态是非常简单的。你只需简单的写出你的目的。MobX 会替你处理好剩下的事情。</p>
<h3 id="细粒度的可观测性是高效的"><a href="#细粒度的可观测性是高效的" class="headerlink" title="细粒度的可观测性是高效的"></a>细粒度的可观测性是高效的</h3><p>MobX 构建应用中所有衍生的图形，以找到保持最新状态所需的重新计算的最少次数。“衍生一切”或许听上去开销很昂贵，但 MobX 构建虚拟衍生图以保持衍生与状态同步所需的重计算的数量最小化。</p>
<p>事实上，在 Mendix 测试 MobX 时我们发现使用这个库跟踪代码中的关系通常会更有效，而不是通过使用手写事件或基于容器组件的“智能”选择器来推送更改。</p>
<p>简单来说，是因为 MobX 会在数据上建立更细粒度的“监听器”，而不是通过程序来控制。</p>
<p>其次, MobX 看到衍生之间的因果关系，因此它可以为衍生排序，使得衍生不会运行多次或引入缺陷。</p>
<p>想了解这是如何工作的？ 请参见 深入剖析 MobX。</p>
<h3 id="易操作性"><a href="#易操作性" class="headerlink" title="易操作性"></a>易操作性</h3><p>MobX 使用原生 javascript 。由于它的侵入性不强，它可以和绝大部分 javascript 库共同使用，而不需要特定的 MobX 风格库。</p>
<p>所以你可以继续使用你的路由，数据获取和工具库，比如react-router、 director、 superagent、 lodash，等等。</p>
<p>出于同样的原因，你可以在服务器端和客户端使用它，也可以在 react-native 这样的同构应用中使用。</p>
<p>结论就是: 相比其它状态管理解决方案，当使用 MobX 时通常只需学习更少的新概念。</p>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://lhweb.gitee.io/blog/blog/2018/09/23/React-with-TypeScript-系列-五-Flux/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="lhweb">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/blog/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="编程那点事">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blog/2018/09/23/React-with-TypeScript-系列-五-Flux/" itemprop="url">React with TypeScript 系列(五) --Flux</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-09-23T07:41:53+08:00">
                2018-09-23
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">In</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/typescript/" itemprop="url" rel="index">
                    <span itemprop="name">typescript</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <blockquote>
<p><a href="https://lhweb.gitee.io/blog/2018/09/22/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%B8%80-%E6%A6%82%E8%BF%B0/">React with TypeScript 系列(一) –概述</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%BA%8C-%E2%80%93%E5%9F%BA%E7%A1%80%E7%AF%87/">React with TypeScript 系列(二) –基础篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%B8%89-%E5%AE%9E%E6%88%98%E7%AF%87/">React with TypeScript 系列(三) –实战篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E5%9B%9B-%E2%80%93%E6%95%B0%E6%8D%AE%E7%AF%87/">React with TypeScript 系列(四) –数据篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%BA%94-Flux/">React with TypeScript 系列(五) –Flux</a></p>
</blockquote>
<p>对于React，更多是解决了UI层，也就是对于传统MVC中的View.至于Model-Controller 如果要整合React的代码又是如何实现呢？Facebook提出了一个叫做Flux([flʌks])的概念。</p>
<p>在传统MVC中，我们会遇到这样一个问题，随着项目功能和模块的增长，所产生的Model和对应的View就会多起来，而系统的复杂性也随之增加。如下图：<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-五-Flux/20160127142656806.png" alt><br>当然上图的情况比较极端，但也是一个不能不面对的问题，特别是有双向数据流产生的时候，就更难去解耦了。而Facebook所提供的Flux 是单向数据流的方式呈现，把MVC重新划分成Action ,Dispatcher,Store,View 四个重要的组件。如图：<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-五-Flux/20160127143427824.png" alt><br>当Action触发时，flux通过Dispatcher进行响应。换句话说，Dispatcher是一个中转站，它管理整个Flux架构的数据枢纽, 这看上去很像我们所说的Controller.而Store更接近我们的Model,负责数据的操作。但它也负责一些状态变化。Dispatcher其实是一个Store的回调注册。当Dispatcher响应Action时，通过已经注册的回调函数，将Action所提供的数据传送给对应的Store，而Store变化时，界面也会同步更新。</p>
<p>听上去有点复杂，我来说一个实例大家就会明白了，还是用回我们的主界面。我们把Facebook一个标准的Flux流图作为参考来说。<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-五-Flux/20160127152334758.png" alt><br><img src="/blog/2018/09/23/React-with-TypeScript-系列-五-Flux/20160127153017750.png" alt><br>当要加载页面时，我们需要把Action Creators放在ComponentDidMount方法中，这样才能把最后的数据给页面。<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-五-Flux/20160127155024981.png" alt>  </p>
<p>Dispatcher要做什么，当然是把对应的Store回调处理好，如所对应的Action和返回的值。这里要说我们需要做一个ActionType为每个不同的Action事件做绑定（如增删改查）。所以在定义Dispatcher时需要定义一个APIActionID的枚举类型。如图：<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-五-Flux/20160127160021826.png" alt><br>注意：这个枚举类型，分别会为Store和Action作出对应ID。所以大家必须要注意。别以为没用了</p>
<p>还有一个基本的对应类型APIAction<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-五-Flux/20160127160504595.png" alt> </p>
<p>Dispatcher的最后绑定是和APIAction做绑定</p>
<p><img src="/blog/2018/09/23/React-with-TypeScript-系列-五-Flux/20160127160358656.png" alt><br>当我们在componentDidMount中使用Action时，它是通过Dispatcher去寻找Store的回调把数据传给Store保存，从而影响页面的变化的。<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-五-Flux/20160127161406779.png" alt><br>这里就是Action中的加载，最后是要把返回的结果给Store的，所以会通过Dispatcher绑定actionType,和返回的结果。而在Store中,就只需要对应好actionType即可。下面的的方法就是我们针对不同的actionType，Store所要做的事情。<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-五-Flux/20160127162517544.png" alt><br>Store涉及侦听回调事件，所以通过EventEmitter去完成.这里我们用到EventEmitter2<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-五-Flux/20160127162915769.png" alt><br>这个时候，只要能匹配好actionType，数据就可以顺利匹配上界面上了。<br>Flux不是一个新的技术，而是一个设计模式。对于Flux更多的是优化项目架构。或者你更习惯MVC/MVVM,但当模块增多的时候你会觉得它是更好的实现。</p>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://lhweb.gitee.io/blog/blog/2018/09/23/React-with-TypeScript-系列-四-–数据篇/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="lhweb">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/blog/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="编程那点事">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blog/2018/09/23/React-with-TypeScript-系列-四-–数据篇/" itemprop="url">React with TypeScript 系列(四) –数据篇</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-09-23T07:33:23+08:00">
                2018-09-23
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">In</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/typescript/" itemprop="url" rel="index">
                    <span itemprop="name">typescript</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <blockquote>
<p><a href="https://lhweb.gitee.io/blog/2018/09/22/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%B8%80-%E6%A6%82%E8%BF%B0/">React with TypeScript 系列(一) –概述</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%BA%8C-%E2%80%93%E5%9F%BA%E7%A1%80%E7%AF%87/">React with TypeScript 系列(二) –基础篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%B8%89-%E5%AE%9E%E6%88%98%E7%AF%87/">React with TypeScript 系列(三) –实战篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E5%9B%9B-%E2%80%93%E6%95%B0%E6%8D%AE%E7%AF%87/">React with TypeScript 系列(四) –数据篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%BA%94-Flux/">React with TypeScript 系列(五) –Flux</a></p>
</blockquote>
<p>前三篇的文章把React的基础和TypeScript对ReactJS的一些整合方式都绍给大家了，接下来几篇会聊到如何和数据业务进行整合。今天先说说简单的数据整合，而之后会说flux。</p>
<p>数据加载现在在JS 上都会使用Promise的模式(<a href="http://www.infoq.com/cn/news/2011/09/js-promise" target="_blank" rel="noopener">http://www.infoq.com/cn/news/2011/09/js-promise</a>) , 而React 对于数据的载入重点不是你用什么方法去利用Promise模式去加载数据。更多是关心你的数据是怎么触发数据页面的DOM元素的变化。在该系列文章的第二篇也有提及几个名JSX, State,Props都是React中数据加载后影响的几个元素。</p>
<p>我们来看看State变化时的一些细节，触发DOM元素的变化是在ComponnetDidUpdate()方法内，这里通过SetState去触发重新的render()<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-四-–数据篇/20160116125411208.png" alt><br>而Props 的变化也大致和State一样<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-四-–数据篇/20160116130549172.png" alt><br>好我们先来看看代码（话说代码大家都是比较关注的），继续我们之前的例子，需要加载数据的是CatalogList这个组件，所以我们把焦点放在这里。</p>
<ol>
<li><p>先做好一个DataService.ts , 这里我用到了jquery 和 bluebird</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">///</span></span><br><span class="line"><span class="comment">///</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span> ReactDemo.Utils</span><br><span class="line">&#123;</span><br><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">DataService</span></span>&#123;</span><br><span class="line"></span><br><span class="line">getCatalogList() : <span class="built_in">Promise</span>&#123;</span><br><span class="line"><span class="keyword">var</span> url = <span class="string">'/api/values'</span>;</span><br><span class="line"><span class="keyword">return</span> <span class="keyword">this</span>.getPromise(url);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">private getPromise(api: string): <span class="built_in">Promise</span> &#123;</span><br><span class="line"><span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve: (result: string</span>) =&gt;</span> <span class="keyword">void</span>, <span class="attr">reject</span>: <span class="function">(<span class="params">error: string</span>) =&gt;</span> <span class="keyword">void</span>): <span class="function"><span class="params">void</span> =&gt;</span> &#123;</span><br><span class="line">$.ajax(&#123;</span><br><span class="line">url: api,</span><br><span class="line">cache: <span class="literal">false</span>,</span><br><span class="line">dataType: <span class="string">"json"</span>,</span><br><span class="line">type: <span class="string">"GET"</span>,</span><br><span class="line">success: resolve.bind(<span class="keyword">this</span>),</span><br><span class="line">error: <span class="function">(<span class="params">jqXHR: JQueryXHR, status: string, message: string</span>) =&gt;</span> &#123;</span><br><span class="line">reject(<span class="string">`status[<span class="subst">$&#123;status&#125;</span>] message[<span class="subst">$&#123;message&#125;</span>]`</span>);</span><br><span class="line">&#125;</span><br><span class="line">&#125;);</span><br><span class="line">&#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>我们需要对之前的CatalogList 和 CatalogItem 做对应调整，由于我们需要在CatalogList上加载数据，所以我们需要定义它的State值，而在CatalogItem中我们只需要把CatalogList中加载数据后的每一项数据传递给CatalogItem的Props即可。</p>
</li>
</ol>
<p>先看我们定义的CatalogItem , 这里我们定义了一个接收数据的Props , 注意一点在ReactJS中初始化getInistailState在TypeScript中的呈现方式是用构造函数所取代的，而参数值传递是以{}作为标签，根据接口的数据，就有了我们下列的呈现方式<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">interface CatalogItemProps &#123;</span><br><span class="line">data : any;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">CatalogItem</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span>&lt;<span class="title">CatalogItemProps</span>,<span class="title">any</span>&gt;</span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">constructor</span>(props : CatalogItemProps)&#123;</span><br><span class="line"><span class="keyword">super</span>(props);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">public render()</span><br><span class="line">&#123;</span><br><span class="line"><span class="keyword">return</span> (</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#123;<span class="keyword">this</span>.props.data.catalogGroupPrice&#125;折</span><br><span class="line">&#123;<span class="keyword">this</span>.props.data.catalogGroup&#125;人团</span><br><span class="line">&#123;<span class="keyword">this</span>.props.data.catalogName&#125;</span><br><span class="line">&#123;<span class="keyword">this</span>.props.data.catalogIntro&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#123;<span class="keyword">this</span>.props.data.catalogGroup&#125;人团</span><br><span class="line">¥&#123;<span class="keyword">this</span>.props.data.catalogGroupPrice&#125;</span><br><span class="line">去开团</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">);</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>而CatalogList 如下：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line">interface CatalogListState &#123;</span><br><span class="line">list : any ;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">interface CatalogListProps &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">CatalogList</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span>&lt;<span class="title">CatalogListProps</span>,<span class="title">CatalogListState</span>&gt;</span>&#123;</span><br><span class="line"></span><br><span class="line">public state : CatalogListState ;</span><br><span class="line"></span><br><span class="line"><span class="keyword">constructor</span>(props : CatalogListProps)&#123;</span><br><span class="line"><span class="keyword">super</span>(props);</span><br><span class="line"><span class="keyword">this</span>.state = &#123;<span class="attr">list</span> : []&#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">public componentDidMount: <span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">void</span> =</span><br><span class="line">(): <span class="function"><span class="params">void</span> =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> dataService = <span class="keyword">new</span> ReactDemo.Utils.DataService();</span><br><span class="line"><span class="keyword">var</span> dataList;</span><br><span class="line">dataService.getCatalogList().then(<span class="function">(<span class="params">result:string</span>)=&gt;</span>&#123;</span><br><span class="line"><span class="keyword">this</span>.setState(&#123;<span class="attr">list</span>:result&#125;);</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">public render()</span><br><span class="line">&#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> catalogs;</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>(<span class="keyword">this</span>.state.list)&#123;</span><br><span class="line">catalogs = <span class="keyword">this</span>.state.list.map(<span class="function"><span class="keyword">function</span>(<span class="params">catalog</span>)</span>&#123;</span><br><span class="line"><span class="keyword">return</span> (</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">);</span><br><span class="line">&#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">return</span> (</span><br><span class="line"></span><br><span class="line">&#123;catalogs&#125;</span><br><span class="line">);</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>关于CatalogList需要注意的地方是你必须判断state中list是否有效否则会出错，所以if(this.state)是不能缺少的，否则出错，其次不要忘记componentDidMount才能触发this.setState(….)</p>
<ol start="3">
<li>运行后你就可以看结果了（图片就不在这里加载了）<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-四-–数据篇/20160116143551811.png" alt></li>
</ol>
<p>好就说到这里，明天我们谈flux</p>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://lhweb.gitee.io/blog/blog/2018/09/23/React-with-TypeScript-系列-三-实战篇/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="lhweb">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/blog/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="编程那点事">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blog/2018/09/23/React-with-TypeScript-系列-三-实战篇/" itemprop="url">React with TypeScript 系列(三) --实战篇</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-09-23T07:19:55+08:00">
                2018-09-23
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">In</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/typescript/" itemprop="url" rel="index">
                    <span itemprop="name">typescript</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <blockquote>
<p><a href="https://lhweb.gitee.io/blog/2018/09/22/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%B8%80-%E6%A6%82%E8%BF%B0/">React with TypeScript 系列(一) –概述</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%BA%8C-%E2%80%93%E5%9F%BA%E7%A1%80%E7%AF%87/">React with TypeScript 系列(二) –基础篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%B8%89-%E5%AE%9E%E6%88%98%E7%AF%87/">React with TypeScript 系列(三) –实战篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E5%9B%9B-%E2%80%93%E6%95%B0%E6%8D%AE%E7%AF%87/">React with TypeScript 系列(四) –数据篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%BA%94-Flux/">React with TypeScript 系列(五) –Flux</a></p>
</blockquote>
<p>说了两篇理论，是时候实操一下了。找个实例说说。<br>假设我们要用ReactJS实现一下列表<br>由于React 是组件化的元素，所以这个时候你需要分解一下这个页面<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-三-实战篇/20160113202537877.png" alt></p>
<p>如图所示 ，我会分解成<br>头 head - 这是一个滚动的广告，是页面的头部<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-三-实战篇/20160113203022020.png" alt></p>
<p>尾foot - 这是一个底部，负责Tab<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-三-实战篇/20160113203242061.png" alt></p>
<p>最后就是我们所说的列表catalogList了<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-三-实战篇/20160113203455098.png" alt></p>
<p><img src="/blog/2018/09/23/React-with-TypeScript-系列-三-实战篇/20160113204437992.png" alt></p>
<p>按照这个划分我们的页面是由<code>&lt;head/&gt;&lt;catalogList/&gt;&lt;foot/&gt;</code>按顺序构成，若果再细分CatalogList 你可以针对每个行在划分成CatalogItem组件。而CatalogItem里的再划分是没有必要了。<br>我们开始搭建我们的平台</p>
<ol>
<li>开发工具和环境搭建<br>Visual Studio Code 是我的个人选择，当然你可以用Atom,也可以用SublimeText。如果要编译tsx文件你必须对VisualStudio Code 进行配置（这里有个前提是你需要把我的第一篇文章看了，因为你需要安装好react.d.tsd文件）, 我在asp.net 5 模版下构建例子，添加了一个简单的Index.tsx文件。<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-三-实战篇/20160113210908974.png" alt></li>
</ol>
<p>当我需要编译这个文件时（mac 下cmd＋shit＋B，windows下自己找文档吧），系统会要求你创建一个编译环境<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-三-实战篇/20160113211523708.png" alt></p>
<p>你点击Configure Task Runner, 就会生成task.json,<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-三-实战篇/20160113211838454.png" alt></p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">"compilerOptions"</span>: &#123;</span><br><span class="line">        <span class="attr">"jsx"</span> : <span class="string">"react"</span>,</span><br><span class="line">        <span class="attr">"outDir"</span>: <span class="string">"./wwwroot/ts/"</span>,</span><br><span class="line">        <span class="attr">"target"</span>: <span class="string">"es5"</span>,</span><br><span class="line">        <span class="attr">"module"</span>: <span class="string">"commonjs"</span>,</span><br><span class="line">        <span class="attr">"sourceMap"</span>: <span class="literal">true</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">"files"</span>: [</span><br><span class="line">        <span class="string">"./wwwroot/ts/Index.tsx"</span></span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>回到我们的task.json把args那行替换为”args”:[“-p”,”.”]即可，<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-三-实战篇/20160113221307497.png" alt></p>
<p>之后在Index.tsx重新按cmd+shit+B 就可以对tsx进行编译，生成Index.js,Index.js.map两个文件了。<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-三-实战篇/20160113221612766.png" alt></p>
<p> 二. 写代码去<br> 按照之前分析的方法我们去构建tsx其实很简单(我这里先做一个静态的，动态的之后系列再谈)<br> Head组件如下：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">class Head extends React.Component<span class="tag">&lt;<span class="name">any,any</span>&gt;</span>&#123;</span><br><span class="line">    public render()</span><br><span class="line">    &#123;</span><br><span class="line">        return (<span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">"swiper-container"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">"swiper-wrapper"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">"swiper-slide"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">img</span> <span class="attr">alt</span>=<span class="string">""</span> <span class="attr">src</span>=<span class="string">"images/ad/app.jpg"</span> /&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">"swiper-slide"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">img</span> <span class="attr">alt</span>=<span class="string">""</span> <span class="attr">src</span>=<span class="string">"images/ad/app.jpg"</span> /&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">"swiper-slide"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">img</span> <span class="attr">alt</span>=<span class="string">""</span> <span class="attr">src</span>=<span class="string">"images/ad/app.jpg"</span> /&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">"swiper-pagination"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;/<span class="name">div</span>&gt;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>Foot组件如下：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Foot</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span>&lt;<span class="title">any</span>,<span class="title">any</span>&gt;</span>&#123;</span><br><span class="line">    public render()</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="keyword">return</span> (<span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line">                    &lt;div id="footer"&gt;</span><br><span class="line">                                &lt;ul&gt;</span><br><span class="line">                                    &lt;li&gt;&lt;a href="#" className="navs curr"&gt;&lt;div className="navs-home"&gt;&lt;/div&gt;首页&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                                    &lt;li&gt;&lt;a href="#" className="navs"&gt;&lt;div className="navs-group"&gt;&lt;/div&gt;我的团&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                                    &lt;li&gt;&lt;a href="#" className="navs"&gt;&lt;div className="navs-order"&gt;&lt;/div&gt;我的订单&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                                    &lt;li&gt;&lt;a href="#" className="navs"&gt;&lt;div className="navs-user"&gt;&lt;/div&gt;个人中心&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">                                &lt;/ul&gt;</span><br><span class="line"><span class="xml">                     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">              <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>CatalogItem 组件如下：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">CatalogItem</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span>&lt;<span class="title">any</span>,<span class="title">any</span>&gt;</span>&#123;</span><br><span class="line">    public render()</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="keyword">return</span> (<span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line">                    &lt;div className="goods"&gt;</span><br><span class="line">                        &lt;a href="#"&gt;</span><br><span class="line">                            &lt;div className="goods-img"&gt;</span><br><span class="line">                                &lt;img src="images/goods/good.jpg" alt="" /&gt;</span><br><span class="line">                                &lt;span className="goods-mark"&gt;</span><br><span class="line">                                    &lt;span className="goods-discount"&gt;8.0折&lt;/span&gt;</span><br><span class="line">                                    &lt;span className="customers-num"&gt;3人团&lt;/span&gt;</span><br><span class="line">                                &lt;/span&gt;</span><br><span class="line">                            &lt;/div&gt;</span><br><span class="line">                            &lt;h2&gt;【正宗哈密瓜】西州蜜17号1个19.9元（单果大于1.5千克）&lt;/h2&gt;</span><br><span class="line">                            &lt;p className="outline"&gt;【正宗哈密瓜】西州蜜，甜如蜜！椭圆浅麻绿，网纹细全密。甜不甜，大不大，一个重来有3斤！浓香溢，肉细腻，清甜爽口西州蜜！&lt;/p&gt;</span><br><span class="line">                            &lt;div className="goods-go"&gt;</span><br><span class="line">                                &lt;div className="goods-go-icon"&gt;&lt;/div&gt;</span><br><span class="line">                                &lt;div className="goods-go-price"&gt;</span><br><span class="line">                                    &lt;span&gt;3人团&lt;/span&gt;</span><br><span class="line">                                    &lt;b&gt;¥19.90&lt;/b&gt;</span><br><span class="line">                                &lt;/div&gt;</span><br><span class="line">                                &lt;div className="goods-go-btn"&gt;去开团&lt;/div&gt;</span><br><span class="line">                            &lt;/div&gt;</span><br><span class="line">                        &lt;/a&gt;</span><br><span class="line">                    &lt;/div&gt;</span><br><span class="line"><span class="xml">              <span class="tag">&lt;/<span class="name">div</span>&gt;</span>);</span></span><br><span class="line"><span class="xml">    &#125;</span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure></p>
<p> CatalogList组件如下：</p>
<figure class="highlight scala"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">CatalogList</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component&lt;any</span>,<span class="title">any&gt;</span></span>&#123;</span><br><span class="line">    public render()</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="keyword">return</span> (&lt;div&gt;</span><br><span class="line">                     &lt;div id=<span class="string">"goods-list"</span>&gt;</span><br><span class="line">                        &lt;<span class="type">CatalogItem</span>/&gt;&lt;<span class="type">CatalogItem</span>/&gt;</span><br><span class="line">                     &lt;/div&gt;</span><br><span class="line">                &lt;/div&gt;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>最后就是修正Index组件并把Head,CatalogList,Foot组件添加进去，并对应页面dom标签就可以：</p>
<figure class="highlight scala"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Index</span> <span class="keyword">extends</span>  <span class="title">React</span>.<span class="title">Component&lt;any</span>,<span class="title">any&gt;</span> </span>&#123;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  public render()&#123;</span><br><span class="line">      <span class="keyword">return</span> (&lt;div&gt;&lt;<span class="type">Head</span>/&gt;&lt;<span class="type">CatalogList</span>/&gt;&lt;<span class="type">Foot</span>/&gt;&lt;/div&gt;);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function renderIndex()&#123;</span><br><span class="line"></span><br><span class="line"><span class="type">ReactDOM</span>.render(</span><br><span class="line">             &lt;<span class="type">Index</span> /&gt;,</span><br><span class="line">             document.getElementById(<span class="symbol">'wra</span>p')</span><br><span class="line"></span><br><span class="line">          );</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">renderIndex();</span><br></pre></td></tr></table></figure>
<p>回到default.html,你所做的就是添加Index.js和把其他css添加进去即可了。<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-三-实战篇/20160113230812747.png" alt></p>
<p> 最后一步，当然是运行看看，感觉不错吧。<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-三-实战篇/20160113230812747.png" alt></p>
<p> 大家开始手痒想马上连接数据了吧，别急，下篇见！！</p>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://lhweb.gitee.io/blog/blog/2018/09/23/React-with-TypeScript-系列-二-–基础篇/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="lhweb">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/blog/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="编程那点事">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blog/2018/09/23/React-with-TypeScript-系列-二-–基础篇/" itemprop="url">React with TypeScript 系列(二) –基础篇</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-09-23T07:03:51+08:00">
                2018-09-23
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">In</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/typescript/" itemprop="url" rel="index">
                    <span itemprop="name">typescript</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <blockquote>
<p><a href="https://lhweb.gitee.io/blog/2018/09/22/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%B8%80-%E6%A6%82%E8%BF%B0/">React with TypeScript 系列(一) –概述</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%BA%8C-%E2%80%93%E5%9F%BA%E7%A1%80%E7%AF%87/">React with TypeScript 系列(二) –基础篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%B8%89-%E5%AE%9E%E6%88%98%E7%AF%87/">React with TypeScript 系列(三) –实战篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E5%9B%9B-%E2%80%93%E6%95%B0%E6%8D%AE%E7%AF%87/">React with TypeScript 系列(四) –数据篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%BA%94-Flux/">React with TypeScript 系列(五) –Flux</a></p>
</blockquote>
<p>今天和大家说说React的一些基础。</p>
<h1 id="1-JSX"><a href="#1-JSX" class="headerlink" title="1. JSX"></a>1. JSX</h1><p>这是一个把XML混在JavaScript 的一种方式。Facebook相信这种方式令标签语言和JS代码更佳紧凑。在React构件页面时，是以组件(Component)的方式存在的, 通过组件构件的页面元素就是通过JSX的方式完成。在React中你不一定要用JSX，但是这是令人痛苦的决定。因为每一个页面元素都必须通过React.createElement的方式创建，而JSX就更像嵌入HTML语言，很方便。  </p>
<p>举个例子吧，如果我们需要构建一个这样的页面，使用JSX会更方便，而且和写HTML基本一致的。<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-二-–基础篇/20160110001909058.png" alt></p>
<p>需要注意的地方<br>a. 建议大家在写JSX时先把基本效果在纯净态页面下写好，这样会事半功倍</p>
<p>b. 引入页面css的class时，class是JSX的保留字段，所以class的名字是className.</p>
<p>c. 结合TypeScript写JSX时，暂时没有智能提示和相应的插件，这个比较头痛的，但习惯了就好</p>
<p><strong>Props 和 State</strong></p>
<p>State  - 页面发生交互时，会产生数据的变化，这个时候就需要State去更新页面的组件。</p>
<p>Props - 简单来说就是渲染页面动态数据的。例如绑定动态内容等。<br>在TypeScript中如何实现呢？这里必须要看看react.d.ts。<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-二-–基础篇/20160110162153389.png" alt></p>
<p>这里就可以看到，当我们使用React.Component时必须要把你的Props和State定义好带进去。我一般定义的习惯如下：<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-二-–基础篇/20160110162919908.png" alt></p>
<p><strong>注意事项</strong></p>
<p>a. 如上图，你构建的Order组件，必须是tsx为后序，否则你是不可能用TS编译它，</p>
<p>b. 在构造函数中需要带上以Props相关的参数，而State是不需要的</p>
<h1 id="2-运行周期"><a href="#2-运行周期" class="headerlink" title="2. 运行周期"></a>2. 运行周期</h1><p>你必须熟悉React的生命周期，如下图：<br><img src="/blog/2018/09/23/React-with-TypeScript-系列-二-–基础篇/20160110164214928.png" alt></p>
<p>这里要切记，你的State变化后必须在componentDidMount方法，也只有在这个方法里触发Re-render,大家可以参照下面的方法做一个测试，在Chrome的控制台就可以看到执行的顺序了。</p>
<figure class="highlight actionscript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">interface</span> <span class="title">ReactProps</span>  </span>&#123;</span><br><span class="line">      elapsed : any;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="class"><span class="keyword">interface</span> <span class="title">ReactState</span> </span>&#123;</span><br><span class="line">       list : any ;  </span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">ChangeState</span><span class="params">()</span>: ReactState </span>&#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        list: []</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="class"><span class="keyword">class</span> <span class="title">Hi</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span>&lt;<span class="title">ReactProps</span>,<span class="title">ReactState</span>&gt; </span>&#123;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">public</span> state : ReactState ;</span><br><span class="line"></span><br><span class="line">      constructor(props : ReactProps)&#123;</span><br><span class="line">        <span class="keyword">super</span>(props);</span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">public</span> componentWillMount()&#123;</span><br><span class="line">        console.log(<span class="string">'componentWillMount'</span>);</span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">public</span> componentDidMount()&#123;</span><br><span class="line">        console.log(<span class="string">'componentDidMount'</span>);</span><br><span class="line">        <span class="keyword">this</span>.setState(ChangeState());</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">public</span> render()&#123;</span><br><span class="line"></span><br><span class="line">        console.log(<span class="string">'render'</span>);</span><br><span class="line">            <span class="keyword">var</span> elapsed = Math.round(<span class="keyword">this</span>.props.elapsed  / <span class="number">100</span>);</span><br><span class="line">          <span class="keyword">return</span> &lt;div&gt;&#123;elapsed&#125;&lt;/div&gt;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">render</span><span class="params">()</span></span>&#123;</span><br><span class="line">        ReactDOM.render(</span><br><span class="line">            &lt;Hi elapsed = &#123;<span class="number">100</span>&#125; /&gt;,</span><br><span class="line">            document.getElementById(<span class="string">'container'</span>)</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    render();</span><br></pre></td></tr></table></figure>
          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://lhweb.gitee.io/blog/blog/2018/09/22/markdown基本语法/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="lhweb">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/blog/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="编程那点事">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blog/2018/09/22/markdown基本语法/" itemprop="url">markdown基本语法</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-09-22T23:26:19+08:00">
                2018-09-22
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <p>markdown是一种纯文本格式的标记语言。通过简单的标记语法，它可以使普通文本内容具有一定的格式。</p>
<p>相比WYSIWYG编辑器</p>
<p><strong>优点</strong>：<br>1、因为是纯文本，所以只要支持markdown的地方都能获得一样的编辑效果，可以让作者摆脱排版的困扰，专心写作。<br>2、操作简单。比如:WYSIWYG编辑时标记个标题，先选中内容，再点击导航栏的标题按钮，选择几级标题。要三个步骤。而markdown只需要在标题内容前加#即可</p>
<p><strong>缺点</strong>：<br>1、需要记一些语法（当然，是很简单。五分钟学会）。<br>2、有些平台不支持markdown编辑模式。</p>
<p>还好，简书是支持markdown编辑模式的。</p>
<p><code>开启方式：设置-&gt;默认编辑器-&gt;markdown编辑器</code></p>
<h2 id="一、标题"><a href="#一、标题" class="headerlink" title="一、标题"></a>一、标题</h2><p>在想要设置为标题的文字前面加#来表示<br>一个#是一级标题，二个#是二级标题，以此类推。支持六级标题。</p>
<p>注：标准语法一般在#后跟个空格再写文字，貌似简书不加空格也行。</p>
<p>示例：<br><figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"># 这是一级标题</span><br><span class="line">## 这是二级标题</span><br><span class="line">### 这是三级标题</span><br><span class="line">#### 这是四级标题</span><br><span class="line">##### 这是五级标题</span><br><span class="line">###### 这是六级标题</span><br></pre></td></tr></table></figure></p>
<p>效果如下：</p>
<h1 id="这是一级标题"><a href="#这是一级标题" class="headerlink" title="这是一级标题"></a>这是一级标题</h1><h2 id="这是二级标题"><a href="#这是二级标题" class="headerlink" title="这是二级标题"></a>这是二级标题</h2><h3 id="这是三级标题"><a href="#这是三级标题" class="headerlink" title="这是三级标题"></a>这是三级标题</h3><h4 id="这是四级标题"><a href="#这是四级标题" class="headerlink" title="这是四级标题"></a>这是四级标题</h4><h5 id="这是五级标题"><a href="#这是五级标题" class="headerlink" title="这是五级标题"></a>这是五级标题</h5><h6 id="这是六级标题"><a href="#这是六级标题" class="headerlink" title="这是六级标题"></a>这是六级标题</h6><h2 id="二、字体"><a href="#二、字体" class="headerlink" title="二、字体"></a>二、字体</h2><p>加粗<br>要加粗的文字左右分别用两个*号包起来</p>
<p>斜体<br>要倾斜的文字左右分别用一个*号包起来</p>
<p>斜体加粗<br>要倾斜和加粗的文字左右分别用三个*号包起来</p>
<p>删除线<br>要加删除线的文字左右分别用两个~~号包起来</p>
<p>示例：<br><figure class="highlight asciidoc"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">*<span class="strong">*这是加粗的文字*</span><span class="strong">*</span></span><br><span class="line"><span class="strong">*</span>这是倾斜的文字<span class="strong">*`</span></span><br><span class="line"><span class="strong">*</span>*<span class="strong">*这是斜体加粗的文字*</span>*<span class="strong">*</span></span><br><span class="line"><span class="strong">~~这是加删除线的文字~~</span></span><br></pre></td></tr></table></figure></p>
<p>效果如下：</p>
<p><strong>这是加粗的文字</strong><br><em>这是倾斜的文字</em><br><strong><em>这是斜体加粗的文字</em></strong><br><del>这是加删除线的文字</del></p>
<h2 id="三、引用"><a href="#三、引用" class="headerlink" title="三、引用"></a>三、引用</h2><p>在引用的文字前加&gt;即可。引用也可以嵌套，如加两个&gt;&gt;三个&gt;&gt;&gt;<br>n个…<br>貌似可以一直加下去，但没神马卵用</p>
<p>示例：<br><figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&gt;这是引用的内容</span><br><span class="line"><span class="meta">&gt;&gt;</span>这是引用的内容</span><br><span class="line"><span class="meta">&gt;&gt;</span>&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;这是引用的内容</span><br></pre></td></tr></table></figure></p>
<p>效果如下：</p>
<blockquote>
<p>这是引用的内容</p>
<blockquote>
<p>这是引用的内容</p>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<p>这是引用的内容</p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<h2 id="四、分割线"><a href="#四、分割线" class="headerlink" title="四、分割线"></a>四、分割线</h2><p>三个或者三个以上的 - 或者 * 都可以。</p>
<p>示例：<br><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="bullet">-</span><span class="meta">---</span></span><br><span class="line"><span class="string">***</span></span><br><span class="line"><span class="string">*****</span></span><br></pre></td></tr></table></figure></p>
<p>效果如下：</p>
<h2 id="可以看到，显示效果是一样的。"><a href="#可以看到，显示效果是一样的。" class="headerlink" title="可以看到，显示效果是一样的。"></a>可以看到，显示效果是一样的。</h2><hr>
<hr>
<hr>
<h2 id="五、图片"><a href="#五、图片" class="headerlink" title="五、图片"></a>五、图片</h2><p>语法：<br><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">![<span class="string">图片alt</span>](<span class="link">图片地址 ''图片title''</span>)</span><br><span class="line"></span><br><span class="line">图片alt就是显示在图片下面的文字，相当于对图片内容的解释。</span><br><span class="line">图片title是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加</span><br></pre></td></tr></table></figure></p>
<p>示例：<br><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">!<span class="selector-attr">[blockchain]</span>(<span class="attribute">https</span>:<span class="comment">//ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/</span></span><br><span class="line">u=<span class="number">702257389</span>,<span class="number">1274025419</span>&amp;fm=<span class="number">27</span>&amp;gp=<span class="number">0</span>.jpg <span class="string">"区块链"</span>)</span><br></pre></td></tr></table></figure></p>
<p>效果如下：<br><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/
u=702257389,1274025419&amp;fm=27&amp;gp=0.jpg" alt="blockchain" title="区块链"></p>
<p>上传本地图片直接点击导航栏的图片标志，选择图片即可</p>
<h2 id="六、超链接"><a href="#六、超链接" class="headerlink" title="六、超链接"></a>六、超链接</h2><p>语法：<br><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">[<span class="string">超链接名</span>](<span class="link">超链接地址 "超链接title"</span>)</span><br><span class="line">title可加可不加</span><br></pre></td></tr></table></figure></p>
<p>示例：<br><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">[<span class="string">简书</span>](<span class="link">http://jianshu.com</span>)</span><br><span class="line">[<span class="string">百度</span>](<span class="link">http://baidu.com</span>)</span><br></pre></td></tr></table></figure></p>
<p>效果如下：</p>
<p><a href="http://jianshu.com" target="_blank" rel="noopener">简书</a><br><a href="http://baidu.com" target="_blank" rel="noopener">百度</a></p>
<p>注：markdown本身语法不支持链接在新页面中打开，貌似简书做了处理，是可以的。别的平台可能就不行了，如果想要在新页面中打开的话可以用html语言的a标签代替。<br><figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;a <span class="attribute">href</span>=<span class="string">"超链接地址"</span> <span class="attribute">target</span>=<span class="string">"_blank"</span>&gt;超链接名&lt;/a&gt;</span><br><span class="line"></span><br><span class="line">例&lt;a <span class="attribute">href</span>=<span class="string">"https://www.jianshu.com/u/1f5ac0cf6a8b"</span> <span class="attribute">target</span>=<span class="string">"_blank"</span>&gt;简书&lt;/a&gt;</span><br></pre></td></tr></table></figure></p>
<h2 id="七、列表"><a href="#七、列表" class="headerlink" title="七、列表"></a>七、列表</h2><h3 id="无序列表"><a href="#无序列表" class="headerlink" title="无序列表"></a>无序列表</h3><p>语法：<br>无序列表用 - + * 任何一种都可以<br><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">- </span>列表内容</span><br><span class="line"><span class="bullet">+ </span>列表内容</span><br><span class="line"><span class="bullet">* </span>列表内容</span><br><span class="line"></span><br><span class="line">注意：- + * 跟内容之间都要有一个空格</span><br></pre></td></tr></table></figure></p>
<p>效果如下：</p>
<ul>
<li>列表内容</li>
</ul>
<ul>
<li>列表内容</li>
</ul>
<ul>
<li>列表内容</li>
</ul>
<h3 id="有序列表"><a href="#有序列表" class="headerlink" title="有序列表"></a>有序列表</h3><p>语法：<br>数字加点<br><figure class="highlight lsl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>列表内容</span><br><span class="line"><span class="number">2.</span>列表内容</span><br><span class="line"><span class="number">3.</span>列表内容</span><br><span class="line"></span><br><span class="line">注意：序号跟内容之间要有空格</span><br></pre></td></tr></table></figure></p>
<p>效果如下：</p>
<ol>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ol>
<h3 id="列表嵌套"><a href="#列表嵌套" class="headerlink" title="列表嵌套"></a>列表嵌套</h3><h4 id="上一级和下一级之间敲三个空格即可"><a href="#上一级和下一级之间敲三个空格即可" class="headerlink" title="上一级和下一级之间敲三个空格即可"></a>上一级和下一级之间敲三个空格即可</h4><ul>
<li><p>一级无序列表内容</p>
<ul>
<li>二级无序列表内容</li>
<li>二级无序列表内容</li>
<li>二级无序列表内容</li>
</ul>
</li>
<li><p>一级无序列表内容</p>
<ol>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ol>
</li>
<li><p>一级有序列表内容</p>
<ul>
<li>二级无序列表内容</li>
<li>二级无序列表内容</li>
<li>二级无序列表内容</li>
</ul>
</li>
<li><p>一级有序列表内容</p>
<ul>
<li>二级有序列表内容</li>
<li>二级有序列表内容</li>
<li>二级有序列表内容</li>
</ul>
</li>
</ul>
<h2 id="八、表格"><a href="#八、表格" class="headerlink" title="八、表格"></a>八、表格</h2><p>语法：<br><figure class="highlight gherkin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">表头|<span class="string">表头</span>|<span class="string">表头</span></span><br><span class="line"><span class="string">---</span>|<span class="string">:--:</span>|<span class="string">---:</span></span><br><span class="line"><span class="string">内容</span>|<span class="string">内容</span>|<span class="string">内容</span></span><br><span class="line"><span class="string">内容</span>|<span class="string">内容</span>|<span class="string">内容</span></span><br><span class="line"></span><br><span class="line"><span class="string">第二行分割表头和内容。</span></span><br><span class="line"><span class="string">- 有一个就行，为了对齐，多加了几个</span></span><br><span class="line"><span class="string">文字默认居左</span></span><br><span class="line"><span class="string">-两边加：表示文字居中</span></span><br><span class="line"><span class="string">-右边加：表示文字居右</span></span><br><span class="line"><span class="string">注：原生的语法两边都要用 </span>|<span class="string"> 包起来。此处省略</span></span><br></pre></td></tr></table></figure></p>
<p>效果如下：</p>
<table>
<thead>
<tr>
<th>姓名</th>
<th style="text-align:center">技能</th>
<th style="text-align:right">排行</th>
</tr>
</thead>
<tbody>
<tr>
<td>刘备</td>
<td style="text-align:center">哭</td>
<td style="text-align:right">大哥</td>
</tr>
<tr>
<td>关羽</td>
<td style="text-align:center">打</td>
<td style="text-align:right">二哥</td>
</tr>
<tr>
<td>张飞</td>
<td style="text-align:center">骂</td>
<td style="text-align:right">三弟</td>
</tr>
</tbody>
</table>
<h2 id="九、代码"><a href="#九、代码" class="headerlink" title="九、代码"></a>九、代码</h2><p>语法：<br>单行代码：代码之间分别用一个反引号包起来<br><figure class="highlight autohotkey"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">    `代码内容`</span><br><span class="line">```    </span><br><span class="line">代码块：代码之间分别用三个反引号包起来，且两边的反引号单独占一行</span><br></pre></td></tr></table></figure></p>
<p>(<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">  代码...</span><br><span class="line">  代码...</span><br><span class="line">  代码...</span><br><span class="line">(```)</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>注：为了防止转译，前后三个反引号处加了小括号，实际是没有的。这里只是用来演示，实际中去掉两边小括号即可。</p>
</blockquote>
<p>示例：</p>
<p>单行代码</p>
<p><code>create database hero;</code><br>代码块<br><figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">(```)</span><br><span class="line">    function <span class="function"><span class="title">fun</span><span class="params">()</span></span>&#123;</span><br><span class="line">         echo <span class="string">"这是一句非常牛逼的代码"</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="title">fun</span><span class="params">()</span></span>;</span><br><span class="line">(```)</span><br></pre></td></tr></table></figure></p>
<p>效果如下：</p>
<p>单行代码</p>
<p><code>create database hero;</code></p>
<p>代码块<br><figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">function <span class="function"><span class="title">fun</span><span class="params">()</span></span>&#123;</span><br><span class="line">  echo <span class="string">"这是一句非常牛逼的代码"</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="title">fun</span><span class="params">()</span></span>;</span><br></pre></td></tr></table></figure></p>
<p>十、流程图<br><figure class="highlight jboss-cli"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">...flow</span> <span class="string">//</span>注意<span class="string">...</span>替换成</span><br></pre></td></tr></table></figure></p>
<p>st=&gt;start: Start<br>op=&gt;operation: Your Operation<br>cond=&gt;condition: Yes or No?<br>e=&gt;end<br>st-&gt;op-&gt;cond<br>cond(yes)-&gt;e<br>cond(no)-&gt;op…<br><code>`</code><br>效果如下：</p>
<div id="flowchart-0" class="flow-chart"></div>

<blockquote>
<p>注意：这里必须要安装hexo-filter-flowchart插件</p>
</blockquote>
<p><code>npm install --save hexo-filter-flowchart</code></p>
<p><script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.5/flowchart.min.js"></script><textarea id="flowchart-0-code" style="display: none">st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op</textarea><textarea id="flowchart-0-options" style="display: none">{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12}</textarea><script>  var code = document.getElementById("flowchart-0-code").value;  var options = JSON.parse(decodeURIComponent(document.getElementById("flowchart-0-options").value));  var diagram = flowchart.parse(code);  diagram.drawSVG("flowchart-0", options);</script></p>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://lhweb.gitee.io/blog/blog/2018/09/22/React-with-TypeScript-系列-一-概述/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="lhweb">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/blog/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="编程那点事">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blog/2018/09/22/React-with-TypeScript-系列-一-概述/" itemprop="url">React with TypeScript 系列(一) --概述</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-09-22T23:03:59+08:00">
                2018-09-22
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">In</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/typescript/" itemprop="url" rel="index">
                    <span itemprop="name">typescript</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <blockquote>
<p><a href="https://lhweb.gitee.io/blog/2018/09/22/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%B8%80-%E6%A6%82%E8%BF%B0/">React with TypeScript 系列(一) –概述</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%BA%8C-%E2%80%93%E5%9F%BA%E7%A1%80%E7%AF%87/">React with TypeScript 系列(二) –基础篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%B8%89-%E5%AE%9E%E6%88%98%E7%AF%87/">React with TypeScript 系列(三) –实战篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E5%9B%9B-%E2%80%93%E6%95%B0%E6%8D%AE%E7%AF%87/">React with TypeScript 系列(四) –数据篇</a><br><a href="https://lhweb.gitee.io/blog/2018/09/23/React-with-TypeScript-%E7%B3%BB%E5%88%97-%E4%BA%94-Flux/">React with TypeScript 系列(五) –Flux</a></p>
</blockquote>
<p>React来自Facebook,这和AngularJS来自Google那样。AngularJS也好，Backbone也好，都解决了一个MV的问题。简单来说就是前端的MV结构。那React有和不同呢？我们为什么还需要选择React? React并不像AngularJS ，他只集中解决了Views,而且它是单向数据流的。React 相对于AngularJS来说，并不是一个解决MV*的框架，更接近AngularJS directives. React 提供了独立的UI模块化组件，方便开发，测试，和组件重用。React有别于我们熟悉的Jquery，不直接控制DOM元素，而是通过JavaScript与DOM之间的虚拟DOM元素完成对操作。</p>
<p>TypeScript在1.6版本开始已经支持React的JSX当然你得把名字换成TSX ，这让编写React更有范儿了。说到这个也是满心的欢喜，因为微软不止爱Google,也爱Facebook. 通过TypeScript你可以写出更漂亮的React代码。</p>
<p>来个Hello World 吧！</p>
<p>先通过tsd把React所对应的TypeScript 下载下来输入tsd install react-global , 这里包含了React基础库以及如React-Dom,React-AddOn等相对应的TypeScript描述。</p>
<p><img src="/blog/2018/09/22/React-with-TypeScript-系列-一-概述/20151223235714492.png" alt><br>创建一个简单的HelloWorld.tsx（因为这是TypeScript哦），再入以下代码 ：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">interface</span> HelloWorldProps &#123;</span><br><span class="line">  name: <span class="built_in">string</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> HelloMessage <span class="keyword">extends</span> React.Component&lt;HelloWorldProps, <span class="built_in">any</span>&gt; &#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    <span class="keyword">return</span> &lt;div&gt;Hello &#123;<span class="keyword">this</span>.props.name&#125;&lt;<span class="regexp">/div&gt;;</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">ReactDOM.render(&lt;HelloMessage name="React" /</span>&gt;, <span class="built_in">document</span>.getElementById(<span class="string">'container'</span>));</span><br></pre></td></tr></table></figure>
<p>通过命令行编译HelloWorld.tsx , 在终端输入 tsc –jsx react  HelloWorld.tsx编译通过后就可以生成HelloWorld.js了。</p>
<p>添加一个index.html 页面 ，去嵌套你的HelloWorld.js </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/js/react.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/js/react-dom.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/scripts/HelloWorld.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>直接运行index.html (这里你需要选择放在nodejs/.net/java/php等服务上)就可以看到Hello React了</p>
<p><img src="/blog/2018/09/22/React-with-TypeScript-系列-一-概述/20151224001428979.png" alt></p>
<p>它究竟做了什么？  简单来说就是创建了一个虚拟DOM  HelloMessage ，然后传递一个React的参数进去，然后放到页面contents的元素内。从语法上来说，没有多大需要学习的。你只需要理解什么是虚拟DOM就可以了。（当然今天只谈概要，更多知识我会放在后面说）。</p>
<p>有人会说，React只做View ，那么剩下的M,*(Controller/Presenter/ViewModel)如何做？其实Facebook给了你一个很好的答案Flux ，完全的单项数据流传递，方便拆分，方便测试。如图，这是一个经典的Flux解决方案，通过整合React能高效完成开发任务。在接下来几天我会一一和大家解答。</p>
<p><img src="/blog/2018/09/22/React-with-TypeScript-系列-一-概述/20151224002727841.png" alt></p>
<p>React是一个比较新的前端解决方案，现在是0.14.x的版本，有很多不太成熟的地方。不过有Facebook的后台撑腰也是非常不错的，毕竟把它用在了Facebook/Instagram的项目中。随着越来越多的开发人员加入到React中来，我相信会加快产品的迭代和进步。</p>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://lhweb.gitee.io/blog/blog/2018/09/22/使用Gitee-Hexo搭建个人博客/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="lhweb">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/blog/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="编程那点事">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/blog/2018/09/22/使用Gitee-Hexo搭建个人博客/" itemprop="url">使用Gitee+Hexo搭建个人博客</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-09-22T21:17:49+08:00">
                2018-09-22
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h3 id="为何使用Gitee而不是GitHub"><a href="#为何使用Gitee而不是GitHub" class="headerlink" title="为何使用Gitee而不是GitHub"></a>为何使用Gitee而不是GitHub</h3><p>目前国内访问GitHub速度慢，还可能被墙，所以Gitee来构建个人博客。Gitee类似国内版的GitHub，访问速度有保证。</p>
<h3 id="环境要求"><a href="#环境要求" class="headerlink" title="环境要求"></a>环境要求</h3><p>Git<br>NodeJs<br>默认你已经安装了Git和NodeJS(推荐使用cnpm)</p>
<h3 id="开始搭建"><a href="#开始搭建" class="headerlink" title="开始搭建"></a>开始搭建</h3><h4 id="1-安装Hexo"><a href="#1-安装Hexo" class="headerlink" title="1. 安装Hexo"></a>1. 安装Hexo</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">打开 shell 终端，输入命令`npm install -g hexo`</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">$ sudo cnpm install -g hexo</span><br><span class="line"></span><br><span class="line">Password:</span><br><span class="line">Downloading hexo to /usr/<span class="built_in">local</span>/lib/node_modules/hexo_tmp</span><br><span class="line">Copying /usr/<span class="built_in">local</span>/lib/node_modules/hexo_tmp/_hexo@3.7.1@hexo to /usr/<span class="built_in">local</span>/lib/node_modules/hexo</span><br><span class="line">Installing hexo<span class="string">'s dependencies to /usr/local/lib/node_modules/hexo/node_modules</span></span><br><span class="line"><span class="string">[1/27] abbrev@^1.0.7 installed at node_modules/_abbrev@1.1.1@abbrev</span></span><br><span class="line"><span class="string">[2/27] archy@^1.0.0 installed at node_modules/_archy@1.0.0@archy</span></span><br><span class="line"><span class="string">[3/27] hexo-i18n@^0.2.1 installed at node_modules/_hexo-i18n@0.2.1@hexo-i18n</span></span><br><span class="line"><span class="string">[4/27] js-yaml@^3.6.1 existed at node_modules/_js-yaml@3.12.0@js-yaml</span></span><br><span class="line"><span class="string">[5/27] bluebird@^3.4.0 installed at node_modules/_bluebird@3.5.1@bluebird</span></span><br><span class="line"><span class="string">[6/27] chalk@^2.3.1 installed at node_modules/_chalk@2.4.1@chalk</span></span><br><span class="line"><span class="string">[7/27] hexo-front-matter@^0.2.2 installed at node_modules/_hexo-front-matter@0.2.3@hexo-front-matter</span></span><br><span class="line"><span class="string">[8/27] minimatch@^3.0.4 installed at node_modules/_minimatch@3.0.4@minimatch</span></span><br><span class="line"><span class="string">[9/27] pretty-hrtime@^1.0.2 installed at node_modules/_pretty-hrtime@1.0.3@pretty-hrtime</span></span><br><span class="line"><span class="string">[10/27] hexo-util@^0.6.3 installed at node_modules/_hexo-util@0.6.3@hexo-util</span></span><br><span class="line"><span class="string">[11/27] hexo-cli@^1.1.0 installed at node_modules/_hexo-cli@1.1.0@hexo-cli</span></span><br><span class="line"><span class="string">[12/27] resolve@^1.5.0 installed at node_modules/_resolve@1.8.1@resolve</span></span><br><span class="line"><span class="string">[13/27] strip-indent@^2.0.0 installed at node_modules/_strip-indent@2.0.0@strip-indent</span></span><br><span class="line"><span class="string">[14/27] strip-ansi@^4.0.0 installed at node_modules/_strip-ansi@4.0.0@strip-ansi</span></span><br><span class="line"><span class="string">[15/27] text-table@^0.2.0 installed at node_modules/_text-table@0.2.0@text-table</span></span><br><span class="line"><span class="string">[16/27] tildify@^1.2.0 existed at node_modules/_tildify@1.2.0@tildify</span></span><br><span class="line"><span class="string">[17/27] titlecase@^1.1.2 installed at node_modules/_titlecase@1.1.2@titlecase</span></span><br><span class="line"><span class="string">[18/27] moment@^2.19.4 installed at node_modules/_moment@2.22.2@moment</span></span><br><span class="line"><span class="string">[19/27] moment-timezone@^0.5.14 installed at node_modules/_moment-timezone@0.5.21@moment-timezone</span></span><br><span class="line"><span class="string">[20/27] hexo-log@^0.2.0 installed at node_modules/_hexo-log@0.2.0@hexo-log</span></span><br><span class="line"><span class="string">[21/27] swig-extras@0.0.1 installed at node_modules/_swig-extras@0.0.1@swig-extras</span></span><br><span class="line"><span class="string">[22/27] lodash@^4.17.5 installed at node_modules/_lodash@4.17.10@lodash</span></span><br><span class="line"><span class="string">[23/27] cheerio@0.22.0 installed at node_modules/_cheerio@0.22.0@cheerio</span></span><br><span class="line"><span class="string">fsevents@1.2.4 download from binary mirror: &#123;"module_name":"fse","module_path":"./lib/binding/&#123;configuration&#125;/&#123;node_abi&#125;-&#123;platform&#125;-&#123;arch&#125;/","remote_path":"./v&#123;version&#125;/","package_name":"&#123;module_name&#125;-v&#123;version&#125;-&#123;node_abi&#125;-&#123;platform&#125;-&#123;arch&#125;.tar.gz","host":"https://cdn.npm.taobao.org/dist/fsevents"&#125;</span></span><br><span class="line"><span class="string">[24/27] nunjucks@^3.1.2 installed at node_modules/_nunjucks@3.1.3@nunjucks</span></span><br><span class="line"><span class="string">[25/27] swig-templates@^2.0.2 installed at node_modules/_swig-templates@2.0.2@swig-templates</span></span><br><span class="line"><span class="string">[26/27] hexo-fs@^0.2.0 installed at node_modules/_hexo-fs@0.2.3@hexo-fs</span></span><br><span class="line"><span class="string">[27/27] warehouse@^2.2.0 installed at node_modules/_warehouse@2.2.0@warehouse</span></span><br><span class="line"><span class="string">execute post install 2 scripts...</span></span><br><span class="line"><span class="string">[1/2] scripts.postinstall nunjucks@^3.1.2 run "node postinstall-build.js src"</span></span><br><span class="line"><span class="string">[1/2] scripts.postinstall nunjucks@^3.1.2 finished in 109ms</span></span><br><span class="line"><span class="string">[2/2] scripts.install hexo-fs@0.2.3 › chokidar@1.7.0 › fsevents@^1.0.0 run "node install"</span></span><br><span class="line"><span class="string">[fsevents] Success: "/usr/local/lib/node_modules/hexo/node_modules/_fsevents@1.2.4@fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed</span></span><br><span class="line"><span class="string">Pass --update-binary to reinstall or --build-from-source to recompile</span></span><br><span class="line"><span class="string">[2/2] scripts.install hexo-fs@0.2.3 › chokidar@1.7.0 › fsevents@^1.0.0 finished in 306ms</span></span><br><span class="line"><span class="string">deprecate titlecase@^1.1.2 no longer maintained</span></span><br><span class="line"><span class="string">Recently updated (since 2018-08-01): 1 packages (detail see file /usr/local/lib/node_modules/hexo/node_modules/.recently_updates.txt)</span></span><br><span class="line"><span class="string"> 2018-08-06</span></span><br><span class="line"><span class="string">   → resolve@1.8.1 › path-parse@^1.0.5(1.0.6) (14:32:36)</span></span><br><span class="line"><span class="string">All packages installed (280 packages installed from npm registry, used 4s, speed 1.65MB/s, json 236(1.51MB), tarball 5.8MB)</span></span><br><span class="line"><span class="string">[hexo@3.7.1] link /usr/local/bin/hexo@ -&gt; /usr/local/lib/node_modules/hexo/bin/hexo</span></span><br></pre></td></tr></table></figure>
<p>注：如果提示权限错误，命令前加sudo,cnpm 是淘宝的开源镜像，国内访问比npm快。</p>
<h4 id="2-初始化Hexo"><a href="#2-初始化Hexo" class="headerlink" title="2. 初始化Hexo"></a>2. 初始化Hexo</h4><p>在你的电脑上创建Hexo文件夹，在shell终端中切换到Hexo目录，输入命令 hexo init<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">$ <span class="built_in">cd</span> /work/Hexo </span><br><span class="line">/work/Hexo $ hexo init</span><br><span class="line">INFO  Cloning hexo-starter to /work/Hexo</span><br><span class="line">Cloning into <span class="string">'/work/Hexo'</span>...</span><br><span class="line">remote: Counting objects: 65, <span class="keyword">done</span>.</span><br><span class="line">remote: Total 65 (delta 0), reused 0 (delta 0), pack-reused 65</span><br><span class="line">Unpacking objects: 100% (65/65), <span class="keyword">done</span>.</span><br><span class="line">Submodule <span class="string">'themes/landscape'</span> (https://github.com/hexojs/hexo-theme-landscape.git) registered <span class="keyword">for</span> path <span class="string">'themes/landscape'</span></span><br><span class="line">Cloning into <span class="string">'/work/Hexo/themes/landscape'</span>...</span><br><span class="line">^Cwarning: Clone succeeded, but checkout failed.</span><br><span class="line">You can inspect what was checked out with <span class="string">'git status'</span></span><br><span class="line">and retry the checkout with <span class="string">'git checkout -f HEAD'</span></span><br><span class="line"></span><br><span class="line">INFO  See you again</span><br></pre></td></tr></table></figure></p>
<p>初始化完成后Hexo的目录结构：<br>初始化后目录结构</p>
<h4 id="3-获取博客主题"><a href="#3-获取博客主题" class="headerlink" title="3. 获取博客主题"></a>3. 获取博客主题</h4><p>在shell中输入命令：git clone <a href="https://gitee.com/xiuxiuing/hexo-theme-even" target="_blank" rel="noopener">https://gitee.com/xiuxiuing/hexo-theme-even</a> themes/even<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">/work/Hexo $ git <span class="built_in">clone</span> https://gitee.com/xiuxiuing/hexo-theme-even themes/even</span><br><span class="line">Cloning into <span class="string">'themes/even'</span>...</span><br><span class="line">remote: Counting objects: 136, <span class="keyword">done</span>.</span><br><span class="line">remote: Compressing objects: 100% (123/123), <span class="keyword">done</span>.</span><br><span class="line">remote: Total 136 (delta 4), reused 128 (delta 2)</span><br><span class="line">Receiving objects: 100% (136/136), 264.27 KiB | 556.00 KiB/s, <span class="keyword">done</span>.</span><br><span class="line">Resolving deltas: 100% (4/4), <span class="keyword">done</span>.</span><br></pre></td></tr></table></figure></p>
<p>克隆完成后，在/Hexo/themes目录下，可以看到 landscape和even 两个文件夹。<br>我们所要使用的主题都是放在这个目录下，Hexo默认使用的是landscape主题，由于第二步Hexo初始化时主题没有clone成功，所以我们这一步克隆了even主题，接下来会使用even主题进行演示。<br>想获取更多主题，可在网站：<a href="https://hexo.io/themes/" target="_blank" rel="noopener">https://hexo.io/themes/</a> 选择自己喜欢的主题，按照此步的步骤clone下来。</p>
<h4 id="4-config-yml对博客进行基础配置"><a href="#4-config-yml对博客进行基础配置" class="headerlink" title="4. _config.yml对博客进行基础配置"></a>4. _config.yml对博客进行基础配置</h4><p>_config.yml文件修改，保存</p>
<p>_config.yml</p>
<h4 id="5-本地预览博客"><a href="#5-本地预览博客" class="headerlink" title="5. 本地预览博客"></a>5. 本地预览博客</h4><p>编译项目，输入命令：hexo g<br>运行项目，输入命令：hexo s<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">$ hexo g</span><br><span class="line">INFO  Start processing</span><br><span class="line">INFO  Files loaded <span class="keyword">in</span> 186 ms</span><br><span class="line">INFO  Generated: archives/2018/08/index.html</span><br><span class="line">INFO  Generated: archives/index.html</span><br><span class="line">INFO  Generated: archives/2018/index.html</span><br><span class="line">INFO  Generated: index.html</span><br><span class="line">INFO  Generated: 2018/08/08/hello-world/index.html</span><br><span class="line">INFO  5 files generated <span class="keyword">in</span> 242 ms</span><br><span class="line">$ hexo s</span><br><span class="line">INFO  Start processing</span><br><span class="line">INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.</span><br></pre></td></tr></table></figure></p>
<p>在浏览器中输入<code>http://localhost:4000/`</code>就可以看到效果啦</p>
<h3 id="部署博客到Gitee上"><a href="#部署博客到Gitee上" class="headerlink" title="部署博客到Gitee上"></a>部署博客到Gitee上</h3><h4 id="1-创建Gitee账号"><a href="#1-创建Gitee账号" class="headerlink" title="1. 创建Gitee账号"></a>1. 创建Gitee账号</h4><p>到码云：<a href="https://gitee.com/" target="_blank" rel="noopener">https://gitee.com/</a> 上申请注册账号，码云类似国内版的GitHub，所以操作界面跟GitHub差不多，多了一些国产化的东西，这里不做更多介绍了，自己研究下。</p>
<h4 id="2-创建项目"><a href="#2-创建项目" class="headerlink" title="2. 创建项目"></a>2. 创建项目</h4><p>创建项目</p>
<p>创建完成后，在项目中复制项目地址。</p>
<h4 id="3-在-config-yml中配置Git"><a href="#3-在-config-yml中配置Git" class="headerlink" title="3. 在_config.yml中配置Git"></a>3. 在_config.yml中配置Git</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  <span class="built_in">type</span>: git</span><br><span class="line">  repo: https://gitee.com/xiuxiuing/blog.git</span><br><span class="line">  branch: master</span><br></pre></td></tr></table></figure>
<p>注意：冒号后面一定要有空格，否则不能正确识别。</p>
<h4 id="4-发布到Gitee"><a href="#4-发布到Gitee" class="headerlink" title="4. 发布到Gitee"></a>4. 发布到Gitee</h4><p>输入命令npm install hexo-deployer-git –save 安装自动部署发布工具<br>输入命令hexo clean &amp;&amp; hexo g &amp;&amp; hexo d 发布博客，首次发布需要在shell中输入账号和密码。</p>
<h4 id="5-Gitee-Pages设置"><a href="#5-Gitee-Pages设置" class="headerlink" title="5. Gitee Pages设置"></a>5. Gitee Pages设置</h4><p>在项目的服务中选择Pages选项<br>Pages</p>
<p>选择 master分支，点击 部署/更新<br>部署</p>
<p>稍等一会儿博客就发布成功啦，访问博客地址：<a href="https://xiuxiuing.gitee.io/blog，就可预览在线博客啦！！！" target="_blank" rel="noopener">https://xiuxiuing.gitee.io/blog，就可预览在线博客啦！！！</a><br>如果博客的样式不对，则需要在_config.yml中配置下博客地址和路径：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">url: https://xiuxiuing.gitee.io/blog/</span><br><span class="line">root: /blog</span><br></pre></td></tr></table></figure></p>
<p>再执行命令hexo clean &amp;&amp; hexo g &amp;&amp; hexo d 就可以啦。</p>
<p>至此，我们的博客就搭建完成啦！！！<br>在/Hexo/source/_posts目录下就可以写我们的博客啦！！！</p>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
  </section>

  
  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/blog/page/3/"><i class="fa fa-angle-left"></i></a><a class="page-number" href="/blog/">1</a><span class="space">&hellip;</span><a class="page-number" href="/blog/page/3/">3</a><span class="page-number current">4</span>
  </nav>



          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      

      <section class="site-overview-wrap sidebar-panel sidebar-panel-active">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">lhweb</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/blog/archives/">
              
                  <span class="site-state-item-count">39</span>
                  <span class="site-state-item-name">posts</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/blog/categories/index.html">
                  <span class="site-state-item-count">6</span>
                  <span class="site-state-item-name">categories</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/blog/tags/index.html">
                  <span class="site-state-item-count">25</span>
                  <span class="site-state-item-name">tags</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/blog/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">lhweb</span>

  
</div>


  <div class="powered-by">Powered by <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a></div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">Theme &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/blog/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/blog/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/blog/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/blog/js/src/motion.js?v=5.1.4"></script>



  
  

  

  


  <script type="text/javascript" src="/blog/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
